<template>
	<view class="dd-audio-player">
		<view class="dd-audio-player_item" v-for="(item, index) in audioList" :key="index">
			<view class="dd-audio-player_item-left" @click="player(item, index)">
				<!-- {{ inx === index ? '停止' : '播放' }} -->
				<image class="img" :src="inx === index ? pauseSvg : playSvg" mode=""></image>
			</view>
			<view class="dd-audio-player_item-right">
				{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script>
	const playSvg = require('@/static/images/hotspot/play.svg');
	const pauseSvg = require('@/static/images/hotspot/pause.svg');
	export default {
		name: 'DdAudioPlayer',
		props: {
			audioList: {
				type: Array
			}
		},
		data() {
			return {
				inx: 3,
				cacheList: [],
				url: '',
				playSvg,
				pauseSvg
			};
		},
		methods: {
			player(item, index) {
				if (this.inx === index) {
					this.inx = 3;
					// 停止
					this.manager.pause();
				} else {
					this.inx = index;
					// 播放
					if (this.cacheList[index]) {
						if (this.url ===  this.cacheList[index]){
							this.manager.play()
						} else {
							this.manager.seek(0);
							this.manager.title = item.name;
							this.manager.src  = this.cacheList[index];
							this.url =  this.cacheList[index];
						}
					} else {
						this.manager.pause();
						this.$showLoading('加载中');
						dd.downloadFile({                           // 走dd下载接口
						  url: item.url,            
						  success: ({ filePath }) => {         // 下载成功后返回音频文件的临时路径filePath 
						  uni.hideLoading();
						  this.manager.seek(0);
						   this.manager.src = filePath;                 // 将临时路径的值赋给manager的src 
						   this.manager.title = item.name;
						   this.cacheList[index] = filePath;
						   this.url =  filePath;
						  },
						  fail: (res) => {
							uni.hideLoading();
						    dd.showToast({
						      content: res.errorMessage || res.error,
						      type: "fail",
						      duration: 3000
						    })
						  }
						})
					}
				}
			}
		},
		created() {
			this.manager = dd.getBackgroundAudioManager()
			let events =  ["onPlay","onPause","onStop","onEnded","onTimeUpdate","onError","onWaiting"]
			events.forEach(item => {
			    this.manager[item] = (event) => {
					switch (item) {
						case 'onEnded': 
							this.inx = 3;
							break;
					}
			    }
			})
		},
		beforeDestroy() {
			this.manager.stop();
			this.manager = null;
		}
	}
</script>

<style lang="scss" scoped>
	.dd-audio-player {
		&_item {
			display: flex;
			height: 60px;
			margin-bottom: 10px;
			&-left {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60px;
				height: 60px;
				
				background-color: #e6e6e6;
				.img {
					width: 30px;
					height: 30px;
				}
			}
			&-right {
				flex: 1;
				height: 60px;
				padding: 10px;
				line-height: 40px;
				
				font-size: 14px;
				text-align: left;
				
				overflow: hidden;/*超出部分隐藏*/
				text-overflow:ellipsis;/* 超出部分显示省略号 */
				white-space: nowrap;/*规定段落中的文本不进行换行 */
				
				color: $uni-text-color;
				background-color: #EEEEEE;
				
				box-sizing: border-box;
			}
		}
	}
</style>
